import React from 'react';
import { motion } from 'framer-motion';
import { 
  Code, 
  Play, 
  Book, 
  Lightbulb, 
  Zap,
  Target,
  Users,
  Rocket
} from 'lucide-react';

interface WelcomePageProps {
  onStartLearning: () => void;
}

const WelcomePage: React.FC<WelcomePageProps> = ({ onStartLearning }) => {
  
  const features = [
    {
      icon: Code,
      title: '完整代码实现',
      description: '每种模式都有完整的TypeScript代码实现',
      color: 'text-blue-600'
    },
    {
      icon: Play,
      title: '交互式演示',
      description: '在浏览器中直接运行和调试代码',
      color: 'text-green-600'
    },
    {
      icon: Book,
      title: '详细说明',
      description: '包含使用场景、优缺点和最佳实践',
      color: 'text-purple-600'
    },
    {
      icon: Lightbulb,
      title: '最佳实践',
      description: '学习设计模式的最佳使用方式',
      color: 'text-yellow-600'
    }
  ];

  const stats = [
    { label: '设计模式', value: '23', icon: Target },
    { label: '分类', value: '3', icon: Users },
    { label: '代码示例', value: '100+', icon: Code },
    { label: '使用场景', value: '∞', icon: Zap }
  ];

  return (
    <div className="min-h-full">
      <div className="max-w-7xl mx-auto px-6 py-8">
        {/* Hero Section */}
        <motion.div 
          className="text-center mb-12"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <motion.div
            className="inline-flex items-center space-x-2 bg-primary-100 text-primary-700 px-4 py-2 rounded-full text-sm font-medium mb-6"
            whileHover={{ scale: 1.05 }}
          >
            <Rocket className="w-4 h-4" />
            <span>学习设计模式的最佳方式</span>
          </motion.div>
          
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            TypeScript 设计模式
            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600">
              交互式教程
            </span>
          </h1>
          
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            掌握23种经典设计模式，从基础概念到实际应用，通过交互式演示深入理解每种模式的工作原理。
          </p>
          
          <div className="flex flex-wrap justify-center gap-4 mb-12">
            {stats.map((stat, index) => (
              <motion.div
                key={stat.label}
                className="flex items-center space-x-2 bg-white px-4 py-2 rounded-lg shadow-sm border"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ scale: 1.05 }}
              >
                <stat.icon className="w-5 h-5 text-primary-600" />
                <span className="font-semibold text-gray-900">{stat.value}</span>
                <span className="text-gray-600">{stat.label}</span>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Features Section */}
        <motion.div 
          className="mb-16"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
            为什么选择这个教程？
          </h2>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature, index) => (
              <motion.div
                key={feature.title}
                className="bg-white p-6 rounded-xl shadow-sm border hover:shadow-lg transition-all duration-300"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ y: -5 }}
              >
                <div className={`w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mb-4 ${feature.color}`}>
                  <feature.icon className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">
                  {feature.title}
                </h3>
                <p className="text-gray-600 text-sm">
                  {feature.description}
                </p>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Quick Start */}
        <motion.div 
          className="mb-16 bg-gradient-to-r from-primary-500 to-secondary-600 rounded-2xl p-8 text-white"
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.6, delay: 0.4 }}
        >
          <div className="text-center">
            <h2 className="text-3xl font-bold mb-4">
              开始您的设计模式学习之旅
            </h2>
            <p className="text-xl mb-8 opacity-90">
              点击下方按钮开始学习第一个设计模式，体验完整的交互式教程。
            </p>
            
            <div className="flex flex-wrap justify-center gap-4">
              <motion.button
                onClick={onStartLearning}
                className="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-lg"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                开始学习
              </motion.button>
            </div>
          </div>
        </motion.div>


      </div>
    </div>
  );
};

export default WelcomePage;
